<template>
  <div id="billboardBig">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="bell"><svg t="1667024149210" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5026" width="20" height="20">
              <path
                d="M512 341.333333c46.933333 0 85.333333 38.4 85.333333 85.333334 0 23.466667 19.2 42.666667 42.666667 42.666666s42.666667-19.2 42.666667-42.666666c0-93.866667-76.8-170.666667-170.666667-170.666667-23.466667 0-42.666667 19.2-42.666667 42.666667s19.2 42.666667 42.666667 42.666666"
                fill="#d81e06" p-id="5027"></path>
              <path
                d="M89.6 808.533333c-6.4-14.933333-6.4-32 4.266667-44.8 0 0 98.133333-140.8 98.133333-337.066666 0-162.133333 121.6-296.533333 277.333333-317.866667V64c0-23.466667 19.2-42.666667 42.666667-42.666667s42.666667 19.2 42.666667 42.666667v44.8c155.733333 21.333333 277.333333 155.733333 277.333333 317.866667 0 198.4 98.133333 337.066667 98.133333 337.066666 8.533333 12.8 10.666667 29.866667 4.266667 44.8-6.4 14.933333-21.333333 23.466667-38.4 23.466667h-196.266667c-19.2 85.333333-96 149.333333-187.733333 149.333333s-168.533333-64-187.733333-149.333333H128c-14.933333 0-29.866667-8.533333-38.4-23.466667zM277.333333 426.666667c0 138.666667-42.666667 251.733333-74.666666 320h618.666666C789.333333 678.4 746.666667 565.333333 746.666667 426.666667c0-130.133333-104.533333-234.666667-234.666667-234.666667s-234.666667 104.533333-234.666667 234.666667z m234.666667 469.333333c42.666667 0 81.066667-25.6 98.133333-64h-196.266666c17.066667 38.4 55.466667 64 98.133333 64z"
                fill="#d81e06" p-id="5028"></path>
            </svg></span>
          <span>公告</span>
        </div>
      </template>
      <div class="billboard">
        {{billboard}}
      </div>
    </el-card>
  </div>
</template>


<script>
import { reactive, toRefs, inject } from 'vue'
export default {
  name: 'HomeBillboard',
  setup (props) {
    const billboard = inject('homeDataList')
    const data = reactive({
      billboard
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>
#billboardBig {
  position: sticky;
  top: 420px;
}
.box-card {
  margin: 30px auto;
  color: #4c4948;
  letter-spacing: 2px;
  width: 280px;
  border-radius: 10px;
}
.card-header {
  display: flex;
  align-items: center;
  .bell {
    margin-right: 10px;
    animation: scale 1s infinite alternate linear;
  }
}
.billboard {
  line-height: 30px;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.4);
  }
}
</style>